<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript：核心语法+DOM(针对页面操作)+BOM(针对浏览器)
		     学习主体：针对页面操作比较多---DOM操作
			 JQuery操作DOM：理解：JQ框架改变页面内容效果
			 js基础就可以直接学习，了解函数使用
			 基础函数---事件源之后出现，事件源语法糖中
			html()      作用：增加一个元素，覆盖原有html
			val()        作用：针对input元素，实现修改文本框内容
			text()        作用：生成文本内容
			-->
			<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 鼠标点击按钮，然后，改变下面产生一行文本 -->
		<button>按钮1</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia ratione hic neque voluptates ea quisquam, beatae, modi consequuntur sint facilis delectus, architecto possimus itaque consequatur. Optio corporis dolor tempora nemo.</p>
		
		<div style="width: 200px; height: 200px; background: #000;"></div>
		<h3>Lorem</h3>
		
		<input type="button" value="按钮2"/>
		<input type="text"/>
		<script>
			$("button").click(function(){
				/*JQ操作DOM---html()函数使用*/
				$("p").html("<h1>JQ操作DOM-html函数使用</h1>");
			});
			/*练习：div 200*200 背景颜色：黑色，鼠标滑过之后，
			下面内容修改：<h3>提示，修改为黄颜色*/
			$("div").mouseenter(function(){
				$("h3").html("<h3>黄颜色</h3>")
			});
			
			/*练习2：按钮 文本框     点击按钮，文本增加一行文本*/
			$("input[type='button']").click(function(){
				//alert("jq选择器是否选中");
				$("input[type='text']").val("文本框内容修改")
			});
			/*利用JQ操作DOM(页面效果)：1.元素内容操作(3个函数)
			                                       html()
			                                       val()
			                                       text()
			                                      2.属性操作(4个函数)
			                                       <p align="center">
			                                       attr()
			                                       removeattr()
			                                       <input checked>
			                                       prop()
			                                       removeprop()
			                                      3.样式类名操作(5个函数)
			                                       .drmo{属性：属性值}
			                                       addClass()
			                                       removeClass()
			                                       toggleClass()
			                                       hasClass()
			                                      4.元素样式操作(5个函数)
			                                       css()
			                                       语法：css("css属性","css属性")
			                                       width()和height()
			                                       outerwidth()和outherighe()
			                                      5.插入和删除操作(7个函数)
			                                      after()和perpend()
			                                      afte()和before()
			                                      remove()和empty()
			                                      replaceWith()
			                                      6.元素遍历操作(6个函数)
			                                      7.JQ动画操作(7个函数)
									  */
		</script>
	</body>
</html>